<template>
  <div>
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" >EGame</van-divider>
    <van-form @submit="onSubmit" @failed="onFailed" class="loginBlock">
        <h3 class="loginImgBlock">注册 EGame 账号</h3>
        <!-- 通过 validator 进行异步函数校验 -->
        <van-field
            v-model="registerForm.userAccount"
            label="账号"
            name="账号"
            placeholder="请输入账号"
            :rules="[{ validator: ValidatorExact, message: '该账号已存在' },{validator: checkAccountLength, message: '账号长度应该在3-10个字符之间', trigger: 'onBlur'}]"
        />
        <van-field
            v-model="registerForm.userName"
            name="昵称"
            label="昵称"
            placeholder="请输入昵称"
            :rules="[{required: true, message: '请输入昵称', trigger: 'onBlur'}]"
        />
        <van-field
            v-model="registerForm.userPwd"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{validator: checkPwdLength, message: '密码长度应该在6-15个字符之间', trigger: 'onBlur'}]"
        />
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
            v-model="registerForm.userEmail"
            label="邮箱"
            name="邮箱"
            placeholder="请输入邮箱"
            :rules="[{ pattern: mailPattern, message: '请输入邮箱正确格式' }]"
        />
        <van-field
            v-model="registerForm.userPhone"
            label="手机号"
            name="手机号"
            placeholder="请输入手机号"
            :rules="[{ pattern: phonePattern, message: '请输入手机号正确格式' }]"
        />
        <div style="margin: 16px;">
            <van-button block type="info" native-type="submit">
            注册
            </van-button>
        </div>
    </van-form>
  </div>
</template>

<script>
export default {
    data() {
        return {
            registerForm: {
                userAccount: '',
                userName: '',
                userPwd: '',
                userEmail: '',
                userPhone: ''
            },
            mailPattern: /^([a-zA-Z0-9_-])+@([[a-zA-Z0-9_-])+([\.[a-zA-Z0-9_-])+/,
            phonePattern: /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        }
    },
    methods: {
        checkPwdLength(val) {
            const pwdLength = val.length
            if (pwdLength>= 6 && pwdLength <= 15) {
                return true
            } else {
                return false
            }
        },
        checkAccountLength(val) {
            const accountLength = val.length
            if (accountLength>= 3 && accountLength <= 10) {
                return true
            } else {
                return false
            }
        },
        async onSubmit() {
            const {data: res} = await this.$http.put("/api/user/addUserWithRegister",this.registerForm)
            if (res.code !== 200) {
                this.$toast('注册失败'+res.msg)
                return
            }
            this.$toast('注册成功')
            //保存服务器传入的token
            window.sessionStorage.setItem('token', res.data )
            this.$router.push('/egame')
        },
        //该函数需要返回primose对象
        ValidatorExact() {
            return new Promise(async (resolve) => {
                this.$toast.loading('验证中...')
                const {data: res} = await this.$http.post("/api/user/userAccountIsExact",{userAccount: this.registerForm.userAccount})
                if (res.code === 200) {
                    this.$toast.clear()
                    this.$notify({ type: 'success', message: '可用的用户名' })
                    resolve(true)
                }else {
                    this.$toast.clear()
                    resolve(false)
                }
            })
        },
        onFailed() {
            this.$toast('注册失败')
        },
        toEgame() {
            this.$router.push('/')
        }
    }
}
</script>

<style lang="less" scoped>
.loginBlock {
    position: relative;
    top: 150px;
}
.loginImgBlock {
    margin-left: 20px;
}
.registerBtn {
    margin-top: 10px;
}

</style>